<!--
  地图渲染组件 (建议使用mars3d地图的地方都用该组件)
-->
<template>
    <div :id="`mars3d-container${mapKey}`" class="mars3d-container"></div>
</template>

<script>
import Vue from 'vue'
let mars3d = window.mars3d
// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
Vue.prototype.mars3d = mars3d
Vue.prototype.Cesium = mars3d.Cesium

export default {
    name: 'mars3dViewer',

    props: {
        // 地图唯一性标识
        mapKey: {
            type: String,
            default: ''
        },
        // 初始化配置config.json的地址
        url: String,
        // 自定义参数
        options: Object
    },

    mounted() {
        this.initMars3d()
    },

    beforeDestroy() {
        const map = this[`map${this.mapKey}`]
        if (map) {
            map.destroy()
            delete this[`map${this.mapKey}`]
        }
        console.log('>>>>> 地图卸载完成 >>>>')
    },

    methods: {
        async initMars3d() {
            if (this[`map${this.mapKey}`]) {
                this[`map${this.mapKey}`].destroy()
            }

            // 获取配置
            let mapOptions
            if (this.url) {
                // 存在url时才读取
                mapOptions = await mars3d.Util.fetchJson({ url: this.url })
                if (this.options) {
                    mapOptions = mars3d.Util.merge(mapOptions, JSON.parse(JSON.stringify(this.options))) // 合并配置
                }
            } else if (props.options) {
                mapOptions = JSON.parse(JSON.stringify(props.options))
            }

            // 创建三维地球场景
            var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
            // 创建图层
            var graphicLayer = new mars3d.layer.GraphicLayer();
            map.addLayer(graphicLayer);
            // 针对不同终端的优化配置
            if (mars3d.Util.isPCBroswer()) {
                map.zoomFactor = 2.0 // 鼠标滚轮放大的步长参数

                // IE浏览器优化
                if (window.navigator.userAgent.toLowerCase().indexOf('msie') >= 0) {
                    map.viewer.targetFrameRate = 20 // 限制帧率
                    map.scene.requestRenderMode = false // 取消实时渲染
                }
            } else {
                map.zoomFactor = 5.0 // 鼠标滚轮放大的步长参数

                // 移动设备上禁掉以下几个选项，可以相对更加流畅
                map.scene.requestRenderMode = false // 取消实时渲染
                map.scene.fog.enabled = false
                map.scene.skyAtmosphere.show = false
                map.scene.globe.showGroundAtmosphere = false
            }

            // 二三维切换不用动画
            if (map.viewer.sceneModePicker) {
                map.viewer.sceneModePicker.viewModel.duration = 0.0
            }

            this[`map${this.mapKey}`] = map

            // 抛出事件
            this.$emit('onload', map, graphicLayer)
        }
    }
}
</script>

<style>
.mars3d-container {
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
}

/**cesium 工具按钮栏*/
.cesium-viewer-toolbar {
    top: auto !important;
    bottom: 35px !important;
    left: 12px !important;
    right: auto !important;
}

.cesium-toolbar-button img {
    height: 100%;
}

.cesium-viewer-toolbar>.cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
    margin-bottom: 5px;
    float: left;
    clear: both;
    text-align: center;
}

.cesium-button {
    background-color: #3f4854;
    color: #e6e6e6;
    fill: #e6e6e6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    line-height: 32px;
}

/**cesium 底图切换面板*/
.cesium-baseLayerPicker-dropDown {
    bottom: 0;
    left: 40px;
    max-height: 700px;
    margin-bottom: 5px;
}

/**cesium 帮助面板*/
.cesium-navigation-help {
    top: auto;
    bottom: 0;
    left: 40px;
    transform-origin: left bottom;
}

/**cesium 二维三维切换*/
.cesium-sceneModePicker-wrapper {
    width: auto;
}

.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
    float: right;
    margin: 0 3px;
}

/**cesium POI查询输入框*/
.cesium-viewer-geocoderContainer .search-results {
    left: 0;
    right: 40px;
    width: auto;
    z-index: 9999;
}

.cesium-geocoder-searchButton {
    background-color: #3f4854;
}

.cesium-viewer-geocoderContainer .cesium-geocoder-input {
    background-color: rgba(63, 72, 84, 0.7);
}

.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
    background-color: rgba(63, 72, 84, 0.9);
}

.cesium-viewer-geocoderContainer .search-results {
    background-color: #3f4854;
}

/**cesium info信息框*/
.cesium-infoBox {
    top: 50px;
    background: rgba(63, 72, 84, 0.9);
}

.cesium-infoBox-title {
    background-color: #3f4854;
}

/**cesium 任务栏的FPS信息*/
.cesium-performanceDisplay-defaultContainer {
    top: auto;
    bottom: 35px;
    right: 50px;
}

.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
    color: #fff;
}

/**cesium tileset调试信息面板*/
.cesium-viewer-cesiumInspectorContainer {
    top: 10px;
    left: 10px;
    right: auto;
    background-color: #3f4854;
}
</style>